<template>
	<div>
		<BreadList :list="['Home','Content',{'name':'Blog'},'Detail']"></BreadList>
		<a-card>
			<div class="markdown-body" v-html="blogDetail.blogContent"></div>
		</a-card>
	</div>
</template>

<script>
	import {
		getBlogDetail
	} from '@/api/Content.js'
	export default {
		name: 'BlogDetail',
		data() {
			return {
				blogDetail: {}
			}
		},
		created() {
			const blogId = this.$route.query.blogId
			// 判断 js 字符串为空
			if (blogId !== undefined) {
				this.getBlogById(blogId)
			}
		},
		methods: {
			async getBlogById(id) {
				const {
					data: res
				} = await getBlogDetail(id)
				this.blogDetail = res.data
				var MardownIt = require("markdown-it")
				var md = new MardownIt()
				var result = md.render(this.blogDetail.blogContent)
				this.blogDetail.blogContent = result
			}
		}
	}
</script>

<style>
	.markdown-body {
		box-sizing: border-box;
		min-width: 240px;
		max-width: 980px;
		margin: 0 auto;
		padding: 45px;
	}

	@media (max-width: 765px) {
		.markdown-body {
			padding: 15px;
		}
	}
</style>
